import { useState, useEffect, useRef } from 'react';
import { motion } from 'framer-motion';
import { projectsData } from './data/projects';

interface ProjectCarouselProps {
  setSelectedProject: (project: any) => void;
  setIsModalOpen: (isOpen: boolean) => void;
}

export const ProjectCarousel = ({ setSelectedProject, setIsModalOpen }: ProjectCarouselProps) => {
  const [currentPage, setCurrentPage] = useState(0);
  const autoPlayRef = useRef<NodeJS.Timeout | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  const projects = projectsData.subSections;
  const itemsPerPage = 3; // 每页显示3个项目
  const totalPages = Math.ceil(projects.length / itemsPerPage);

  const startAutoPlay = () => {
    if (autoPlayRef.current) {
      clearInterval(autoPlayRef.current);
    }
    autoPlayRef.current = setInterval(() => {
      setCurrentPage((prev) => (prev + 1) % totalPages);
    }, 3000); // 每3秒切换一次
  };

  useEffect(() => {
    startAutoPlay();
    return () => {
      if (autoPlayRef.current) {
        clearInterval(autoPlayRef.current);
      }
    };
  }, []);

  const handleMouseEnter = () => {
    if (autoPlayRef.current) {
      clearInterval(autoPlayRef.current);
    }
  };

  const handleMouseLeave = () => {
    startAutoPlay();
  };

  const getCurrentPageProjects = () => {
    const start = currentPage * itemsPerPage;
    return projects.slice(start, start + itemsPerPage);
  };

  return (
    <div
      ref={containerRef}
      className="w-full"
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <motion.div
        className="grid grid-cols-3 gap-6"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        {getCurrentPageProjects().map((project, index) => (
          <motion.div
            key={`${currentPage}-${index}`}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.1 }}
            className="bg-white rounded-lg shadow-xl p-6 hover:shadow-2xl transition-all cursor-pointer"
            onClick={() => {
              setSelectedProject(project);
              setIsModalOpen(true);
            }}
          >
            <h3 className="text-xl font-bold mb-3 text-gray-800">{project.name}</h3>
            <div className="text-sm text-gray-600 mb-2">{project.tech}</div>
            <p className="text-gray-700 mb-4 line-clamp-2">{project.description}</p>
            <ul className="list-disc list-inside space-y-1">
              {project.details.slice(0, 2).map((detail, idx) => (
                <li key={idx} className="text-sm text-gray-600 line-clamp-1">
                  {detail}
                </li>
              ))}
            </ul>
          </motion.div>
        ))}
      </motion.div>

      <div className="flex justify-center mt-6 space-x-2">
        {Array.from({ length: totalPages }).map((_, index) => (
          <button
            key={index}
            onClick={() => setCurrentPage(index)}
            className={`w-2 h-2 rounded-full transition-all ${
              index === currentPage ? 'bg-blue-500 w-4' : 'bg-gray-300'
            }`}
          />
        ))}
      </div>
    </div>
  );
};